<template>
  <div id="index">
    <div class="tabs">
      <ul>
        <li class="tab is-active" @click="openTab($event,'search')"><a>查询会议室</a></li>
        <li class="tab" @click="openTab($event,'book')"><a>预约管理</a></li>
      </ul>
    </div>

    <div class="tab-contents" id="search">
      <Search></Search>
    </div>
    <div class="tab-contents" id="book" style="display:none">
      <Book></Book>
    </div>
  </div>
</template>

<script>
    import Search from './search/Search'
    import Book from './book/Book'

    export default {
        name: "Index",
        components: {
            Search, Book
        },
        methods: {
            openTab(evt, tabName) {
                var i, x, tablinks;
                x = document.getElementsByClassName("tab-contents");
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                tablinks = document.getElementsByClassName("tab");
                for (i = 0; i < x.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(" is-active", "");
                }
                document.getElementById(tabName).style.display = "block";
                evt.currentTarget.className += " is-active";
            }
        }
    }
</script>

<style scoped>
  @import '~bulma/css/bulma.css';
  #index{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
  }
</style>
